<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../js/index.css">
    <script src="../js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="../js/index.js"></script>
</head>
<body>
    <div id="app">
        <!--
        @current-change: 绑定切换页码事件，所有会导致页码变化的操作都会触发这个事件，会将最新的页码发送给你
        current-page : 当前页码
        page-size : 每页显示数量
        layout :显示组件布局，每一个英文单词代表组件
        total : 指的是数据总条数
        -->
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageData.currentPage"
                :page-size="pageData.pageSize"
                :total="pageData.total"
                layout="total, prev,pager, next,jumper"
                >
        </el-pagination>
        <script>
            new Vue({
                el:'#app',
                methods:{
                    handleCurrentChange(page){
                        //将本地页码，更新到最新的页码
                        this.pageData.currentPage = page
                        //发送请求
                        // axios.post("/test/findPageData.do",{
                        //     pageSize: this.pageData.pageSize,
                        //     currentPage : this.pageData.currentPage
                        // })
                        //     .then(res => {
                        //         //后端返回给前端的数据
                        //         var data = res.data
                        //         //从后端数据中获取到总数据条数，替换分页组件中的总数据
                        //         this.pageData.total = data.total
                        //     }).catch(err => {
                        //     console.log(err)
                        // })
                    }
                },
                data:{
                    //定义VUE对象的模型数据，用于table展示
                    pageData:{
                        total:100,
                        pageSize:20,
                        currentPage:1
						//...
                    }
                },
				created() {
                    axios.get("/test/findAll.do")
                        .then(res => {
                            //后端返回给前端的数据
                            var data = res.data
                            //从后端数据中获取到总数据条数，替换分页组件中的总数据
                            this.pageData.total = data.total
                        }).catch(err => {
                            console.log(err)
                    })
				}
            });
        </script>
    </div>
</body>
</html>